<template>
<div class="container">
        <header>
            <!-- <img src="images/banner4.png"> -->
            <div class="swiper-container">

                <swiper :options="swiperOption" v-if="houseInfo.albumList.length>0">
                    <swiper-slide class="banner-sw" v-for="(val,index) in houseInfo.albumList" :key="index">
                        <img :src="val.imgPath">
                    </swiper-slide>
                    <div class="swiper-pagination num" slot="pagination"></div>
                </swiper>

            </div>
            <!-- 悬浮按钮 -->
            <a class="down" href="javascript:window.history.back()"><span class="icon">&#xe63f;</span></a>
            <a class="collection" href="#"><span class="icon">&#xe639;</span></a>
            <a class="share" href="#"><span class="icon">&#xe607;</span></a>
            <!-- <p class="num">1/9</p> -->
        </header>
        <div class="top">
            <h1>{{houseInfo.name}}</h1>
            <h3>{{houseInfo.desc}}</h3>
            <p>
                <span>{{houseInfo.rentMoney}}</span>
                <span>元/月</span>
                <span>服务费:{{houseInfo.serviceFee}}元</span>
            </p>
        </div>
        <section class="content">
            <h1>基本信息</h1>
            <div class="info">
                <dl>
                    <dt>入住</dt>
                    <dd>{{houseInfo.baseInfo.live}}</dd>
                    <dt>面积</dt>
                    <dd>{{houseInfo.baseInfo.area}}</dd>
                    <dt>户型</dt>
                    <dd>{{houseInfo.baseInfo.model}}</dd>
                    <dt>发布</dt>
                    <dd>{{houseInfo.baseInfo.pubtime}}</dd>
                    <dt>楼层</dt>
                    <dd>{{houseInfo.baseInfo.floor}}</dd>
                    <dt>装修</dt>
                    <dd>{{houseInfo.baseInfo.decorate}}</dd>
                    <dt>车位</dt>
                    <dd>{{houseInfo.baseInfo.stall}}</dd>
                    <dt>付款</dt>
                    <dd>{{houseInfo.baseInfo.payment}}</dd>
                    <dt>小区</dt>
                    <dd>{{houseInfo.baseInfo.plot}}</dd>
                </dl>
                <p><a href="#">查看小区</a></p>
            </div>
            <h1>配套设施</h1>
            <ul class="facilities">
                <li :class="houseInfo.facility.bed==='true'?'':'none'"><span class="icon">&#xe60c;</span>
                    <p>床</p>
                </li>
                <li :class="houseInfo.facility.washer==='true'?'':'none'"><span class="icon">&#xec78;</span>
                    <p>洗衣机</p>
                </li>
                <li :class="houseInfo.facility.refrigerator==='true'?'':'none'"><span class="icon">&#xe90b;</span>
                    <p>冰箱</p>
                </li>
                <li :class="houseInfo.facility.conditioner==='true'?'':'none'"><span class="icon">&#xe60e;</span>
                    <p>空调</p>
                </li>
                <li :class="houseInfo.facility.wifi==='true'?'':'none'"><span class="icon">&#xe6a4;</span>
                    <p>wifi</p>
                </li>
                <li :class="houseInfo.facility.sofa==='true'?'':'none'"><span class="icon">&#xe724;</span>
                    <p>沙发</p>
                </li>
                <li :class="houseInfo.facility.tablesChair==='true'?'':'none'"><span class="icon">&#xe666;</span>
                    <p>桌椅</p>
                </li>
                <li :class="houseInfo.facility.tv==='true'?'':'none'"><span class="icon">&#xe67d;</span>
                    <p>电视</p>
                </li>
                <li :class="houseInfo.facility.calorifier==='true'?'':'none'"><span class="icon">&#xe67f;</span>
                    <p>热水器</p>
                </li>
                <li :class="houseInfo.facility.cook==='true'?'':'none'"><span class="icon">&#xe60d;</span>
                    <p>可做饭</p>
                </li>
                <li :class="houseInfo.facility.heating==='true'?'':'none'"><span class="icon">&#xe90d;</span>
                    <p>暖气</p>
                </li>
                <li :class="houseInfo.facility.balcony==='true'?'':'none'"><span class="icon">&#xe622;</span>
                    <p>阳台</p>
                </li>
            </ul>
            <h1>附近位置</h1>
            <!-- <img src="images/4.jpg"> -->
            <div class="map" id="allmap" style="width: 100%;height: 3.29rem;overflow: hidden;margin:0">
    <baidu-map 
        id="allmap1" 
        @ready="mapReady"
        :scroll-wheel-zoom="true">
    </baidu-map>
</div>
            <h1>附近房源</h1>
            <ul class="case">
                <li>
                    <a href="homedetails.html">
                        <img src="images/5.jpg" class="fl">
                        <div class="text fr">
                            <h1>包图软件园二期押一付三</h1>
                            <p>套二 50m2 距包图大道地铁站1 .2km</p>
                            <ul>
                                <li class="active">在线签约</li>
                                <li>近地铁</li>
                                <li>精装修</li>
                            </ul>
                            <p>2100<span>元/月</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="homedetails.html">
                        <img src="images/5.jpg" class="fl">
                        <div class="text fr">
                            <h1>包图软件园二期押一付三</h1>
                            <p>套二 50m2 距包图大道地铁站1 .2km</p>
                            <ul>
                                <li class="active">在线签约</li>
                                <li>近地铁</li>
                                <li>精装修</li>
                            </ul>
                            <p>2100<span>元/月</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="homedetails.html">
                        <img src="images/5.jpg" class="fl">
                        <div class="text fr">
                            <h1>包图软件园二期押一付三</h1>
                            <p>套二 50m2 距包图大道地铁站1 .2km</p>
                            <ul>
                                <li class="active">在线签约</li>
                                <li>近地铁</li>
                                <li>精装修</li>
                            </ul>
                            <p>2100<span>元/月</span></p>
                        </div>
                    </a>
                </li>
            </ul>
        </section>
        <footer>
            <div class="left"><img class="fl" src="images/touxiang.png" alt="">
                <p class="fl">包图君</p><span>个人</span>
            </div>
            <div class="phone">
                <a href="tel:13113131313">电话咨询</a>
            </div>
            <div class="right">
                <router-link :to="{name:'appoint',query:{hid:houseInfo.hid}}">
                    <a href="javascript:;">立即预约</a>
                </router-link>
            </div>
            <div class="clear"></div>
        </footer>
    </div>
</template>

<script type="text/ecmascript-6">
import $ from 'jquery'
  export default {
    name:'detail',
    data () {
      return {
        point:  "",
        adList:[],
        swiperOption:{
            loop: true,//是否自动轮播
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },  //l轮播间隔时间
            pagination : {
                el: '.swiper-pagination',
                type: 'fraction',
            },//轮播图中下标点显示
            paginationClickable :true//轮播图中下标点显示
        },
      }
    },
    components: {
        //  组件区
    },
    computed:{
        //  计算属性
        houseInfo(){
            if(this.$store.state.index.idHouse.baseInfo===undefined){
                return {
                    baseInfo:{},
                    facility:{},
                    albumList:{}
                }
            }
            return this.$store.state.index.idHouse;
        }
    },
    methods:{
         mapReady({ BMap, map }) {
            // 选择一个经纬度作为中心点
            this.point = new BMap.Point(113.27, 23.13);
            map.centerAndZoom(this.point, 12);
		},
    },
    created:function(){
    },
    mounted:function(){
        $(window).scrollTop(0); //  页面滚动置顶
        let hid = this.$route.params.hid;
        this.$store.dispatch('getOneHouse',hid)
        },
  }

</script>

<style scoped lang="less" rel="stylesheet/less">
#allmap1{
    height: 100%;
}
header {
    position: relative;
    width: 100%;
    height: auto;
}

header img {
    width: 100%;
    height: auto;
    display: block;
}

header a {
    width: .64rem;
    height: .64rem;
    display: block;
    background-color: rgba(0, 0, 0, .2);
    text-align: center;
    line-height: .64rem;
    text-align: center;
    border-radius: 50%;
    font-size: .36rem;
    color: #fff;
    top: .35rem;
    position: absolute;
    z-index: 2;
}

header .down {
    left: .4rem;
}

header .collection {
    right: 1.12rem;
}

header .share {
    right: .37rem;
}

header .num {
    width: .89rem;
    height: .46rem;
    background-color: rgba(0, 0, 0, .2);
    border-radius: .23rem;
    position: absolute;
    right: .39rem;
    bottom: .52rem;
    text-align: center;
    font-size: .3rem;
    line-height: .6rem;
    color: #fff;
    z-index: 2;
}
.swiper-pagination-fraction {
    left: initial;
}

.top {
    margin: .39rem;
    box-sizing: border-box;
    padding: .38rem .38rem 0;
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px #ccc;
}

.top h1 {
    font-size: .4rem;
}

.top h3 {
    color: #adada9;
    font-size: .28rem;
}

.top p {
    margin-top: .2rem;
    font-size: .3rem;
}

.top p span:nth-child(1) {
    font-size: .5rem;
    color: #ff2023;
    font-weight: 600;
}

.top p span:nth-child(2) {
    color: #ff2023;
}

.top p span:nth-child(3) {
    color: #aeaeab;
    float: right;
    position: relative;
    top: .1rem;
}

.content {
    margin: 0 .24rem;
    margin-bottom: 1.25rem;
}

.content .info {
    position: relative;
}

.content>h1 {
    font-size: .4rem;
    margin: .4rem 0 .2rem;
}

.content dl {
    font-size: .28rem;
    line-height: .58rem;
}

.content dl dt {
    width: 15%;
    float: left;
    color: #adadad;
}

.content dl dd {
    width: 35%;
    float: left;
    color: #4a4a4a;
}

.content dl::after {
    display: block;
    content: "";
    clear: both;
}

.content .info p>a {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #ff2023;
    font-size: .3rem;
}

.content .facilities li {
    float: left;
    width: 20%;
    text-align: center;
    margin-bottom: .15rem;
}

.content .facilities li span {
    font-size: .45rem;
    line-height: .5rem;
    color: #000;
    display: block;
}

.content .facilities {
    margin-top: .2rem;
}

.content .facilities li p {
    font-size: .26rem;
}

.content .facilities li.none span {
    color: #ccc !important;
}

.content .facilities li.none p {
    color: #ccc;
    text-decoration: line-through;
}

.content .facilities::after {
    display: block;
    clear: both;
    content: "";
}

.content img {
    width: 100%;
    display: block;
}

footer {
    border-top: .01rem solid #d8d6d6;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 7.5rem;
    height: 1.2rem;
}

footer>div {
    width: 33.33333%;
    float: left;
    height: 100%;
}

footer .left {
    position: relative;
}

footer .left p {
    font-size: .28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .25rem;
    margin-left: .2rem;
}

footer .left span {
    font-size: .24rem;
    color: #b8b8b8;
    position: absolute;
    top: .6rem;
    left: 1.1rem;
}

footer .left img {
    width: .62rem;
    height: .62rem;
    margin-top: .25rem;
    margin-left: .3rem;
}

footer .phone {
    background-color: #000;
    color: #fff;
    font-size: .34rem;
    line-height: 1.3rem;
    text-align: center;
}

footer .right {
    background-color: #ff3b3d;
    color: #fff;
    font-size: .34rem;
    line-height: 1.3rem;
    text-align: center;
}
footer a{
    width: 100%;
    height: 100%;
    display: block;
}
 
</style>
